import React, { useState, useEffect } from "react";
import { Typography } from "antd";
const { Text } = Typography;

const Countdown = ({ count, onEnd }) => {
  const [timeLeft, setTimeLeft] = useState(count);

  useEffect(() => {
    if (timeLeft === 0) {
      onEnd();
      return;
    }

    const timerId = setTimeout(() => {
      setTimeLeft(timeLeft - 1);
    }, 1000);

    // 清除定时器
    return () => clearTimeout(timerId);
  }, [timeLeft, onEnd]);

  const hours = Math.floor(timeLeft / 3600);
  const minutes = Math.floor((timeLeft % 3600) / 60);
  const seconds = timeLeft % 60;

  return (
    <Text type="danger">
      {hours.toString().padStart(2, "0")}时{minutes.toString().padStart(2, "0")}
      分{seconds.toString().padStart(2, "0")}秒
    </Text>
  );
};

export default Countdown;
